<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车 - 企业福利商城</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    }

    body {
      background-color: #f5f7fa;
      color: #333;
    }

    /* 顶部导航栏 */
    .header {
      background-color: white;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 60px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #409EFF 0%, #64b5ff 100%);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      color: white;
      font-weight: bold;
      font-size: 18px;
    }

    .logo-text {
      font-size: 20px;
      font-weight: 600;
      color: #409EFF;
    }

    .main-nav {
      display: flex;
      list-style: none;
      height: 100%;
    }

    .nav-item {
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      font-weight: 500;
    }

    .nav-item.active {
      color: #409EFF;
    }

    .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #409EFF;
    }

    .user-info {
      display: flex;
      align-items: center;
    }

    .balance {
      margin-right: 20px;
      display: flex;
      align-items: center;
      background-color: #f0f9ff;
      padding: 6px 12px;
      border-radius: 16px;
      color: #409EFF;
      font-weight: 500;
    }

    .balance-icon {
      margin-right: 5px;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #409EFF;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }

    /* 主要内容区域 */
    .main-container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }

    /* 面包屑导航 */
    .breadcrumb {
      background-color: white;
      border-radius: 12px;
      padding: 15px 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
    }

    .breadcrumb-item {
      color: #606266;
      font-size: 14px;
    }

    .breadcrumb-item.active {
      color: #409EFF;
    }

    .breadcrumb-separator {
      margin: 0 8px;
      color: #c0c4cc;
    }

    /* 购物车内容 */
    .cart-container {
      display: flex;
      gap: 20px;
    }

    /* 商品列表 */
    .cart-items {
      flex: 1;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    .cart-header {
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
    }

    .select-all {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }

    .select-all-checkbox {
      margin-right: 8px;
    }

    .cart-title {
      font-weight: 600;
    }

    .cart-list {
      max-height: 500px;
      overflow-y: auto;
    }

    .cart-item {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
    }

    .cart-item:last-child {
      border-bottom: none;
    }

    .item-checkbox {
      margin-right: 15px;
    }

    .item-image {
      width: 80px;
      height: 80px;
      background-color: #f5f7fa;
      border-radius: 8px;
      margin-right: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #909399;
      font-size: 12px;
    }

    .item-info {
      flex: 1;
    }

    .item-name {
      font-weight: 500;
      margin-bottom: 5px;
    }

    .item-spec {
      color: #909399;
      font-size: 13px;
      margin-bottom: 8px;
    }

    .item-price {
      color: #f56c6c;
      font-weight: 600;
    }

    .item-actions {
      display: flex;
      align-items: center;
    }

    .quantity-control {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }

    .quantity-btn {
      width: 28px;
      height: 28px;
      background-color: #f5f7fa;
      border: none;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .quantity-input {
      width: 50px;
      height: 28px;
      text-align: center;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      margin: 0 8px;
    }

    .item-total {
      font-weight: 600;
      color: #f56c6c;
      margin-right: 20px;
      min-width: 80px;
      text-align: right;
    }

    .item-delete {
      color: #909399;
      cursor: pointer;
      transition: color 0.3s;
    }

    .item-delete:hover {
      color: #f56c6c;
    }

    /* 结算区域 */
    .cart-summary {
      width: 300px;
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      align-self: flex-start;
    }

    .summary-title {
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .summary-label {
      color: #606266;
    }

    .summary-value {
      font-weight: 500;
    }

    .summary-total {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
      font-size: 18px;
      font-weight: 600;
    }

    .total-amount {
      color: #f56c6c;
    }

    .checkout-btn {
      width: 100%;
      height: 44px;
      background-color: #409EFF;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .checkout-btn:hover {
      background-color: #66b1ff;
    }

    .checkout-btn:disabled {
      background-color: #c0c4cc;
      cursor: not-allowed;
    }

    .balance-info {
      margin-top: 15px;
      padding: 10px;
      background-color: #f0f9ff;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .balance-label {
      color: #606266;
    }

    .balance-amount {
      color: #409EFF;
      font-weight: 500;
    }

    /* 空购物车 */
    .empty-cart {
      text-align: center;
      padding: 60px 20px;
    }

    .empty-icon {
      font-size: 60px;
      color: #c0c4cc;
      margin-bottom: 20px;
    }

    .empty-text {
      color: #909399;
      margin-bottom: 25px;
    }

    .empty-btn {
      display: inline-block;
      padding: 10px 24px;
      background-color: #409EFF;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      font-weight: 500;
    }

    /* 推荐商品 */
    .recommend-section {
      margin-top: 30px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .product-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .product-image {
      height: 150px;
      background-color: #f5f7fa;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #909399;
      font-size: 14px;
    }

    .product-info {
      padding: 15px;
    }

    .product-name {
      font-weight: 500;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-price {
      color: #f56c6c;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .product-actions {
      display: flex;
      justify-content: space-between;
    }

    .add-to-cart {
      background-color: #409EFF;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }

    /* 底部信息 */
    .footer {
      background-color: white;
      padding: 30px 0;
      margin-top: 50px;
      border-top: 1px solid #e4e7ed;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .footer-desc {
      color: #909399;
      max-width: 300px;
      line-height: 1.6;
    }

    .footer-links {
      display: flex;
    }

    .link-column {
      margin-right: 60px;
    }

    .link-title {
      font-weight: 600;
      margin-bottom: 15px;
    }

    .link-item {
      margin-bottom: 10px;
      color: #606266;
      cursor: pointer;
    }

    .link-item:hover {
      color: #409EFF;
    }

    .copyright {
      text-align: center;
      padding-top: 20px;
      margin-top: 20px;
      border-top: 1px solid #e4e7ed;
      color: #909399;
      font-size: 14px;
    }

    /* 响应式设计 */
    @media (max-width: 1024px) {
      .product-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .cart-container {
        flex-direction: column;
      }

      .cart-summary {
        width: 100%;
      }

      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .nav-item {
        padding: 0 12px;
        font-size: 14px;
      }

      .balance {
        display: none;
      }
    }

    @media (max-width: 480px) {
      .cart-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .item-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 15px;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }

      .nav-container {
        padding: 0 10px;
      }

      .logo-text {
        display: none;
      }

      .main-nav {
        display: none;
      }
    }

    /* 自定义滚动条 */
    .cart-list::-webkit-scrollbar {
      width: 6px;
    }

    .cart-list::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    .cart-list::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }

    .cart-list::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
  <div class="nav-container">
    <div class="logo">
      <div class="logo-icon">福</div>
      <div class="logo-text">企业福利商城</div>
    </div>

    <ul class="main-nav">
      <li class="nav-item">首页</li>
      <li class="nav-item">商品分类</li>
      <li class="nav-item">福利卡兑换</li>
      <li class="nav-item active">购物车</li>
      <li class="nav-item">个人中心</li>
    </ul>

    <div class="user-info">
      <div class="balance">
        <span class="balance-icon">¥</span>
        <span>1,280.50</span>
      </div>
      <div class="avatar">张</div>
    </div>
  </div>
</header>

<!-- 主要内容区域 -->
<div class="main-container">
  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <span class="breadcrumb-item">首页</span>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-item active">购物车</span>
  </div>

  <!-- 购物车内容 -->
  <div class="cart-container">
    <!-- 商品列表 -->
    <div class="cart-items">
      <div class="cart-header">
        <div class="select-all">
          <input type="checkbox" class="select-all-checkbox" id="select-all">
          <label for="select-all">全选</label>
        </div>
        <div class="cart-title">购物车商品</div>
      </div>

      <div class="cart-list" id="cart-list">
        <!-- 购物车商品将通过JS动态生成 -->
        <div class="cart-item">
          <div class="item-checkbox">
            <input type="checkbox" class="item-select" checked>
          </div>
          <div class="item-image">商品图片</div>
          <div class="item-info">
            <div class="item-name">金龙鱼黄金比例食用调和油5L</div>
            <div class="item-spec">规格：5L/桶</div>
            <div class="item-price">¥ 89.90</div>
          </div>
          <div class="item-actions">
            <div class="quantity-control">
              <button class="quantity-btn decrease">-</button>
              <input type="text" class="quantity-input" value="1">
              <button class="quantity-btn increase">+</button>
            </div>
            <div class="item-total">¥ 89.90</div>
            <div class="item-delete">删除</div>
          </div>
        </div>

        <div class="cart-item">
          <div class="item-checkbox">
            <input type="checkbox" class="item-select" checked>
          </div>
          <div class="item-image">商品图片</div>
          <div class="item-info">
            <div class="item-name">福临门水晶米10kg</div>
            <div class="item-spec">规格：10kg/袋</div>
            <div class="item-price">¥ 68.50</div>
          </div>
          <div class="item-actions">
            <div class="quantity-control">
              <button class="quantity-btn decrease">-</button>
              <input type="text" class="quantity-input" value="2">
              <button class="quantity-btn increase">+</button>
            </div>
            <div class="item-total">¥ 137.00</div>
            <div class="item-delete">删除</div>
          </div>
        </div>

        <div class="cart-item">
          <div class="item-checkbox">
            <input type="checkbox" class="item-select" checked>
          </div>
          <div class="item-image">商品图片</div>
          <div class="item-info">
            <div class="item-name">蓝月亮洗衣液套装</div>
            <div class="item-spec">规格：3kg+1kg</div>
            <div class="item-price">¥ 45.80</div>
          </div>
          <div class="item-actions">
            <div class="quantity-control">
              <button class="quantity-btn decrease">-</button>
              <input type="text" class="quantity-input" value="1">
              <button class="quantity-btn increase">+</button>
            </div>
            <div class="item-total">¥ 45.80</div>
            <div class="item-delete">删除</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 结算区域 -->
    <div class="cart-summary">
      <div class="summary-title">订单结算</div>

      <div class="summary-row">
        <span class="summary-label">商品金额</span>
        <span class="summary-value" id="subtotal">¥ 272.70</span>
      </div>

      <div class="summary-row">
        <span class="summary-label">运费</span>
        <span class="summary-value">¥ 0.00</span>
      </div>

      <div class="summary-row">
        <span class="summary-label">优惠</span>
        <span class="summary-value">- ¥ 0.00</span>
      </div>

      <div class="summary-total">
        <span>合计：</span>
        <span class="total-amount" id="total">¥ 272.70</span>
      </div>

      <button class="checkout-btn" id="checkout-btn">立即结算</button>

      <div class="balance-info">
        <span class="balance-label">账户余额：</span>
        <span class="balance-amount">¥ 1,280.50</span>
      </div>
    </div>
  </div>

  <!-- 推荐商品 -->
  <div class="recommend-section">
    <h3 class="section-title">猜你喜欢</h3>

    <div class="product-grid">
      <div class="product-card">
        <div class="product-image">商品图片</div>
        <div class="product-info">
          <div class="product-name">有机蔬菜礼盒</div>
          <div class="product-price">¥ 78.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">商品图片</div>
        <div class="product-info">
          <div class="product-name">进口零食大礼包</div>
          <div class="product-price">¥ 98.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">商品图片</div>
        <div class="product-info">
          <div class="product-name">家庭清洁套装</div>
          <div class="product-price">¥ 56.80</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">商品图片</div>
        <div class="product-info">
          <div class="product-name">智能保温杯</div>
          <div class="product-price">¥ 129.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 底部信息 -->
<footer class="footer">
  <div class="footer-content">
    <div class="footer-about">
      <div class="footer-logo">
        <div class="logo-icon">福</div>
        <div class="logo-text">企业福利商城</div>
      </div>
      <p class="footer-desc">
        企业员工专属福利平台，通过"卡+卡密"兑换机制，为员工提供安全便捷的福利兑换服务。
      </p>
    </div>

    <div class="footer-links">
      <div class="link-column">
        <div class="link-title">购物指南</div>
        <div class="link-item">购物流程</div>
        <div class="link-item">会员介绍</div>
        <div class="link-item">常见问题</div>
      </div>

      <div class="link-column">
        <div class="link-title">配送方式</div>
        <div class="link-item">上门自提</div>
        <div class="link-item">快递配送</div>
        <div class="link-item">配送费用</div>
      </div>

      <div class="link-column">
        <div class="link-title">售后服务</div>
        <div class="link-item">退款说明</div>
        <div class="link-item">返修/退换货</div>
        <div class="link-item">取消订单</div>
      </div>

      <div class="link-column">
        <div class="link-title">关于我们</div>
        <div class="link-item">联系我们</div>
        <div class="link-item">隐私协议</div>
        <div class="link-item">用户协议</div>
      </div>
    </div>
  </div>

  <div class="copyright">
    © 2023 企业福利商城 版权所有 | 客服热线：400-123-4567
  </div>
</footer>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 导航菜单点击效果
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
      item.addEventListener('click', function() {
        navItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 购物车商品数据
    const cartItems = [
      { id: 1, name: '金龙鱼黄金比例食用调和油5L', spec: '规格：5L/桶', price: 89.90, quantity: 1, selected: true },
      { id: 2, name: '福临门水晶米10kg', spec: '规格：10kg/袋', price: 68.50, quantity: 2, selected: true },
      { id: 3, name: '蓝月亮洗衣液套装', spec: '规格：3kg+1kg', price: 45.80, quantity: 1, selected: true }
    ];

    // 全选功能
    const selectAllCheckbox = document.getElementById('select-all');
    selectAllCheckbox.addEventListener('change', function() {
      const itemSelects = document.querySelectorAll('.item-select');
      itemSelects.forEach(checkbox => {
        checkbox.checked = this.checked;
      });
      updateCartItems();
    });

    // 更新购物车商品显示
    function updateCartItems() {
      const cartList = document.getElementById('cart-list');
      cartList.innerHTML = '';

      cartItems.forEach(item => {
        const cartItem = document.createElement('div');
        cartItem.className = 'cart-item';
        cartItem.innerHTML = `
                        <div class="item-checkbox">
                            <input type="checkbox" class="item-select" ${item.selected ? 'checked' : ''}>
                        </div>
                        <div class="item-image">商品图片</div>
                        <div class="item-info">
                            <div class="item-name">${item.name}</div>
                            <div class="item-spec">${item.spec}</div>
                            <div class="item-price">¥ ${item.price.toFixed(2)}</div>
                        </div>
                        <div class="item-actions">
                            <div class="quantity-control">
                                <button class="quantity-btn decrease">-</button>
                                <input type="text" class="quantity-input" value="${item.quantity}">
                                <button class="quantity-btn increase">+</button>
                            </div>
                            <div class="item-total">¥ ${(item.price * item.quantity).toFixed(2)}</div>
                            <div class="item-delete">删除</div>
                        </div>
                    `;
        cartList.appendChild(cartItem);
      });

      // 重新绑定事件
      bindCartItemEvents();
      calculateTotal();
    }

    // 绑定购物车商品事件
    function bindCartItemEvents() {
      // 商品选择
      const itemSelects = document.querySelectorAll('.item-select');
      itemSelects.forEach((checkbox, index) => {
        checkbox.addEventListener('change', function() {
          cartItems[index].selected = this.checked;
          updateSelectAllState();
          calculateTotal();
        });
      });

      // 数量减少
      const decreaseBtns = document.querySelectorAll('.decrease');
      decreaseBtns.forEach((btn, index) => {
        btn.addEventListener('click', function() {
          if (cartItems[index].quantity > 1) {
            cartItems[index].quantity--;
            updateCartItems();
          }
        });
      });

      // 数量增加
      const increaseBtns = document.querySelectorAll('.increase');
      increaseBtns.forEach((btn, index) => {
        btn.addEventListener('click', function() {
          cartItems[index].quantity++;
          updateCartItems();
        });
      });

      // 数量输入
      const quantityInputs = document.querySelectorAll('.quantity-input');
      quantityInputs.forEach((input, index) => {
        input.addEventListener('change', function() {
          const value = parseInt(this.value);
          if (value > 0) {
            cartItems[index].quantity = value;
            updateCartItems();
          } else {
            this.value = cartItems[index].quantity;
          }
        });
      });

      // 删除商品
      const deleteBtns = document.querySelectorAll('.item-delete');
      deleteBtns.forEach((btn, index) => {
        btn.addEventListener('click', function() {
          if (confirm('确定要删除这个商品吗？')) {
            cartItems.splice(index, 1);
            updateCartItems();
          }
        });
      });
    }

    // 更新全选状态
    function updateSelectAllState() {
      const allSelected = cartItems.every(item => item.selected);
      const someSelected = cartItems.some(item => item.selected);

      selectAllCheckbox.checked = allSelected;
      selectAllCheckbox.indeterminate = someSelected && !allSelected;
    }

    // 计算总价
    function calculateTotal() {
      let subtotal = 0;

      cartItems.forEach(item => {
        if (item.selected) {
          subtotal += item.price * item.quantity;
        }
      });

      document.getElementById('subtotal').textContent = `¥ ${subtotal.toFixed(2)}`;
      document.getElementById('total').textContent = `¥ ${subtotal.toFixed(2)}`;

      // 更新结算按钮状态
      const checkoutBtn = document.getElementById('checkout-btn');
      checkoutBtn.disabled = subtotal === 0;
    }

    // 结算按钮点击事件
    const checkoutBtn = document.getElementById('checkout-btn');
    checkoutBtn.addEventListener('click', function() {
      const selectedItems = cartItems.filter(item => item.selected);

      if (selectedItems.length === 0) {
        alert('请选择要结算的商品');
        return;
      }

      // 模拟结算过程
      const totalAmount = selectedItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);

      // 这里应该检查余额是否足够，然后跳转到订单确认页面
      alert(`订单提交成功！总金额：¥ ${totalAmount.toFixed(2)}`);

      // 清空已结算的商品
      cartItems.forEach((item, index) => {
        if (item.selected) {
          cartItems.splice(index, 1);
        }
      });

      updateCartItems();
    });

    // 推荐商品加入购物车
    const addToCartBtns = document.querySelectorAll('.product-actions .add-to-cart');
    addToCartBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const productCard = this.closest('.product-card');
        const productName = productCard.querySelector('.product-name').textContent;
        const productPrice = parseFloat(productCard.querySelector('.product-price').textContent.replace('¥ ', ''));

        // 检查是否已在购物车
        const existingItem = cartItems.find(item => item.name === productName);

        if (existingItem) {
          existingItem.quantity++;
        } else {
          cartItems.push({
            id: Date.now(),
            name: productName,
            spec: '规格：标准',
            price: productPrice,
            quantity: 1,
            selected: true
          });
        }

        updateCartItems();
        alert('商品已添加到购物车');
      });
    });

    // 初始化
    updateCartItems();
  });
</script>
</body>
</html>
